import DefinedPage from '@/pages/definedPage';
import React, { useEffect, useState } from 'react';
import Dynamic from '@/api/dynamic'
import { Button, Form, Input, Radio,Select,Table,Dropdown ,Menu,Tabs } from 'antd';
import './index.less'
import sqldata from './data'
const {Option} = Select;
const columns = [
    {
        dataIndex: 'xttitle',
        key: 'xttitle',
        title:'一级标题',
        sorter: {
            compare: (a, b) => a.xttitle - b.xttitle,
            multiple: 1,
        },
    },
    {
        dataIndex: 'dltitle',
        key: 'dltitle',
        title:'二级标题',
        sorter: {
            compare: (a, b) => a.dltitle - b.dltitle,
            multiple: 1,
        },
    },
    {
        dataIndex: 'lbtitle',
        key: 'lbtitle',
        title:'三级标题',
        sorter: {
            compare: (a, b) => a.lbtitle - b.lbtitle,
            multiple: 1,
        },
    },
    {
        dataIndex: 'title',
        key: 'title',
        title:'报表名称',
        sorter: {
            compare: (a, b) => a.title - b.title,
            multiple: 1,
        },
    },
    {
        dataIndex: 'index',
        key: 'index',
        title:'序号',
        sorter: {
            compare: (a, b) => a.index - b.index,
            multiple: 1,
        },
    },
  ];
export default ()=>{
  const [databaselist,setdatabaselist] = useState([]);
  const [dataSource,setdataSource] = useState([]);
  const [sql,setsql] = useState('');
  const [tableArr,setTableArr] = useState([1,2,3]);
const [dbIndex,setDbIndex] = useState(0);
    const menu = (
    <Menu>
      <Menu.Item>菜单项一</Menu.Item>
      <Menu.Item>菜单项二</Menu.Item>
    </Menu>
  );
  useEffect(()=>{
    Dynamic.getDynamicQuery({
        apiID:'DMT_0001',
        
      }).then((res) => {
        console.log('============')
        console.log(res);
        let data = res?.data?.data||[]
        setdatabaselist(data);
    })
    setdataSource(sqldata);
  },[1])
  const handle = (type)=>{
    

    switch(type){
        case 1:
            let ta = document.getElementById('querySql');
            let startPos = ta.selectionStart;
            let endPos = ta.selectionEnd;

            if(startPos == endPos){
                console.info("没有选中的文字");
                return false;
            }else{
                alert(ta.value.substring(startPos, endPos))
            }
            break;
        case 2:
            alert(sql);
            break;
        default:
            break;
    }
  }
  const onEdit = (targetKey: string, action: 'add' | 'remove') => {
    console.log(action+'...'+targetKey);
    let newtableArr = tableArr.concat([]);
    newtableArr.splice(targetKey,1);
    setTableArr(newtableArr)
  };
  return <div className='dbqueryContainer'>
    <div className='dbqueryHeader'>
        <Form
        layout={'inline'}
        >   
            <Form.Item>
                <Select value={dbIndex} onChange={(val)=>{
                    setDbIndex(dbIndex);
                }}>
                {databaselist.map((item,index) => (
                        <Option value={index}>{item['title']}</Option>
                    ))}
                </Select>
            </Form.Item>
            <Form.Item>
                <Button type="primary">连接</Button>
            </Form.Item>
        </Form>

    </div>
    <div className='dbquerySql'>
        <Input.TextArea value={sql} onChange={(e)=>{setsql(e.target.value)}} id="querySql" style={{height:'90%'}}></Input.TextArea>
    </div>
    <div>
        <Button type="primary" onClick={()=>handle(1)}>执行选中</Button>
        <Button type="primary" onClick={()=>handle(2)} style={{marginLeft:'15px'}}>执行全部</Button>
    </div>
    <div className="dbquerydata">
        {
            tableArr.length>0&&<div>
                 <Tabs
                    type="editable-card"
                    hideAdd
                    onEdit={onEdit}
                >
                    {
                        tableArr.map((e,i)=>{
                            return  <Tabs.TabPane key={i} tab={'结果'+(i+1)}>
                                <Table pagination={false} dataSource={dataSource} title={(current)=>{
                                    return '查询结果'
                                }} columns={columns} scroll={{ y: window.innerHeight-600 }}/>
                            </Tabs.TabPane>
                        })
                    }
                   
                </Tabs>
            </div>
        }
        
    </div>
  </div>
}
